// // import React, { useState } from 'react';
// // import ReactCrop from 'react-image-crop';
// // import 'react-image-crop/dist/ReactCrop.css';

// // function App() {
// //   const [crop, setCrop] = useState({ aspect: 16 / 9 });

// //   return (
// //     <div>
// //       <ReactCrop crop={crop} onChange={newCrop => setCrop(newCrop)}>
// //         <img src="https://photo-static-api.fotomore.com/creative/vcg/veer/400/new/VCG41N681162116.jpg?uid=364&timestamp=1737612076&sign=b519bdb505e27a01b7471a7788775452&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="Example" />
// //       </ReactCrop>
// //     </div>
// //   );
// // }

// // export default App;
// import React, { useState } from 'react';
// import ReactCrop from 'react-image-crop';
// import 'react-image-crop/dist/ReactCrop.css';
// import EasyCrop from 'react-easy-crop';
// import 'react-easy-crop/react-easy-crop.css';

// function App() {
//   const [crop, setCrop] = useState({ aspect: 16 / 9 });

//   return (
//     <div>
//       <ReactCrop crop={crop} onChange={newCrop => setCrop(newCrop)}>
//         <img src="https://photo-static-api.fotomore.com/creative/vcg/veer/400/new/VCG41N681162116.jpg?uid=364&timestamp=1737612076&sign=b519bdb505e27a01b7471a7788775452&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp" alt="Example" />
//       </ReactCrop>
//       <EasyCrop
//         image="https://photo-static-api.fotomore.com/creative/vcg/veer/400/new/VCG41N681162116.jpg?uid=364&timestamp=1737612076&sign=b519bdb505e27a01b7471a7788775452&imageMogr2%2Fthumbnail%2F200x%3E%2Fformat%2Fwebp"
//         crop={crop}
//         onCropChange={setCrop}
//       />
//     </div>
//   );
// }

// export default App;
// import React, { useState } from 'react';
// import ImageCrop from 'react-image-crop';

// function PagesBg() {
//  const [crop, setCrop] = useState({ x: 0, y: 0 });
// const [src, setSrc] = useState('path/to/image.jpg');

// const handleImageChange = (e) => {
//   const file = e.target.files[0];
//   setSrc(URL.createObjectURL(file));
// };

// const handleOnCropComplete = (crop) => {
//   setCrop(crop);
// };

// return (
//   <div>
//     <input type="file" onChange={handleImageChange} />
//     <ImageCrop
//       src={src}
//       crop={crop}
//       onChange={handleOnCropComplete}
//     />
//   </div>
// );

// }

// export default PagesBg
// import React, { useState, useRef } from 'react';

// const ImageMatting = () => {
//     // 存储上传的图片文件
//     const [selectedImage, setSelectedImage] = useState(null);
//     // 存储图片的 URL
//     const [imageUrl, setImageUrl] = useState('');
//     // 存储抠图颜色，默认是绿色
//     const [keyColor, setKeyColor] = useState('#00ff00');
//     // 存储相似度
//     const [similarity, setSimilarity] = useState(20);

//     const canvasRef = useRef(null);

//     const handleImageChange = (e) => {
//         const file = e.target.files[0];
//         if (file) {
//             setSelectedImage(file);
//             const reader = new FileReader();
//             reader.onloadend = () => {
//                 setImageUrl(reader.result);
//             };
//             reader.readAsDataURL(file);
//         }
//     };

//     const performMatting = () => {
//         const canvas = canvasRef.current;
//         const ctx = canvas.getContext('2d');
//         const img = new Image();
//         img.src = imageUrl;

//         img.onload = () => {
//             canvas.width = img.width;
//             canvas.height = img.height;
//             ctx.drawImage(img, 0, 0);

//             const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
//             const data = imageData.data;
//             const rKey = parseInt(keyColor.slice(1, 3), 16);
//             const gKey = parseInt(keyColor.slice(3, 5), 16);
//             const bKey = parseInt(keyColor.slice(5, 7), 16);

//             for (let i = 0; i < data.length; i += 4) {
//                 const r = data[i];
//                 const g = data[i + 1];
//                 const b = data[i + 2];
//                 const distance = Math.sqrt(
//                     Math.pow(r - rKey, 2) +
//                     Math.pow(g - gKey, 2) +
//                     Math.pow(b - bKey, 2)
//                 );
//                 if (distance < similarity) {
//                     data[i + 3] = 0; // 设置透明度为 0
//                 }
//             }

//             ctx.putImageData(imageData, 0, 0);
//         };
//     };

//     return (
//         <div style={{ background: 'pink' }}>
//             <input type="file" accept="image/*" onChange={handleImageChange} />
//             {imageUrl && (
//                 <div>
//                     <h2>原始图片</h2>
//                     <img src={imageUrl} alt="Original" style={{ maxWidth: '100%' }} />
//                     <h2>抠图后的图片</h2>
//                     <canvas ref={canvasRef} style={{ maxWidth: '100%' }} />
//                     <button onClick={performMatting}>开始抠图</button>
//                     <label>抠图颜色: </label>
//                     <input
//                         type="color"
//                         value={keyColor}
//                         onChange={(e) => setKeyColor(e.target.value)}
//                     />
//                     <label>相似度: </label>
//                     <input
//                         type="range"
//                         min="0"
//                         max="255"
//                         step="1"
//                         value={similarity}
//                         onChange={(e) => setSimilarity(parseInt(e.target.value))}
//                     />
//                 </div>
//             )}
//         </div>
//     );
// };

// export default ImageMatting;
import React, { useState } from 'react';

const ShareAndDownload = () => {
    // 存储输入的内容
    const [inputContent, setInputContent] = useState('');
    // 控制是否显示预览
    const [showPreview, setShowPreview] = useState(false);
    // 存储用户选择的下载格式
    const [downloadFormat, setDownloadFormat] = useState('txt');

    // 处理输入框内容变化
    const handleInputChange = (e) => {
        setInputContent(e.target.value);
    };

    // 处理分享按钮点击事件
    const handleShare = () => {
        setShowPreview(true);
    };

    // 处理下载格式选择变化
    const handleFormatChange = (e) => {
        setDownloadFormat(e.target.value);
    };

    // 处理下载按钮点击事件
    const handleDownload = () => {
        let fileContent;
        let fileType;
        let fileName;

        if (downloadFormat === 'txt') {
            fileContent = inputContent;
            fileType = 'text/plain';
            fileName = 'share_content.txt';
        } else if (downloadFormat === 'json') {
            try {
                // 尝试将输入内容解析为 JSON
                const jsonData = JSON.parse(inputContent);
                fileContent = JSON.stringify(jsonData, null, 2);
            } catch (error) {
                // 如果解析失败，将原始内容作为 JSON 字符串保存
                fileContent = JSON.stringify({ content: inputContent }, null, 2);
            }
            fileType = 'application/json';
            fileName = 'share_content.json';
        }

        const element = document.createElement('a');
        const file = new Blob([fileContent], { type: fileType });
        element.href = URL.createObjectURL(file);
        element.download = fileName;
        element.click();
        URL.revokeObjectURL(element.href);
    };

    return (  
        <div>
            {/* 输入框，用于输入要分享的内容 */}
            <textarea
                value={inputContent}
                onChange={handleInputChange}
                placeholder="请输入要分享的内容"
                rows={10}
                cols={50}
            />
            <br />
            {/* 分享按钮 */}
            <button onClick={handleShare}>分享</button>
            {/* 只有在预览状态下才显示下载相关部分 */}
            {showPreview && (
                <div>
                    {/* 下载格式选择下拉框 */}
                    <select value={downloadFormat} onChange={handleFormatChange}>
                        <option value="txt">纯文本 (.txt)</option>
                        <option value="json">JSON (.json)</option>
                    </select>
                    {/* 下载按钮 */}
                    <button onClick={handleDownload}>下载</button>
                    {/* 预览区域 */}
                    <div style={{ border: '1px solid #ccc', padding: '10px', marginTop: '10px' }}>
                        <h2>预览</h2>
                        <pre>{inputContent}</pre>
                    </div>
                </div>
            )}
        </div>
    );
};

export default ShareAndDownload;